<template>
  <div class="personal">
    <!-- 个人信息区域 -->
    <div class="personal_box">
      <div class="personal_left">
        <div class="img">
          <u--image
            :showLoading="true"
            :src="personal.head"
            width="85px"
            height="100px"
          ></u--image>
        </div>
        <div class="text">
          <u--text
            text="王芳"
            size="18"
            bold
          ></u--text>
          <div
            class=""
            style="margin: 2px 0px"
            v-for="item in personalData"
            :key="item.id"
          >
            <u--text
              :text="item.txt1"
              size="13"
              :prefixIcon="item.icon"
              :suffixIcon="item.txt2"
            ></u--text>
          </div>
        </div>
      </div>
      <div class="personal_right">
        <u-icon
          name="edit-pen"
          size="20"
          color="#aa91c1"
          label="编辑"
          labelColor="#4c92ff"
          @click="goEdit"
        ></u-icon>
      </div>
    </div>
    <!-- 学籍管理 -->
    <div
      class="management management2"
      style="background: #fff; padding: 0px 10px"
    >
      <div class="cell1">
        <div style="display: flex">
          <u--image
            :showLoading="true"
            :src="shuxian"
            width="15px"
            height="22px"
          ></u--image>
          <u--text text="都高学籍管理"></u--text>
        </div>
        <div
          style="color: #1990ff"
          @click="goManagement"
        >管理</div>
      </div>
      <div class="cell_ul">
        <div class="cell_li">高148班</div>
      </div>
    </div>
    <!-- 工作信息 -->
    <div
      class="management"
      style="background: #fff; padding: 0px 10px; margin-top: 10px"
    >
      <div class="cell1 cell2">
        <div style="display: flex">
          <u--image
            :showLoading="true"
            :src="shuxian"
            width="15px"
            height="22px"
          ></u--image>
          <u--text text="工作信息"></u--text>
        </div>
        <div
          style="color: #1990ff"
          @click="goAddWork"
        >添加</div>
      </div>
      <div class="cell_ul2">
        <div
          class="time"
          style="font-size: 13px"
        >2020-4 -至今</div>
        <div class="company">
          <u--text
            text="广西电子科技公司"
            color="#000"
            size="13"
            align="right"
            lineHeight="30"
          ></u--text>
          <u--text
            text="总经理"
            color="#838283"
            size="13"
            align="right"
            lineHeight="30"
          ></u--text>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div
      class="btn_box"
      style="
        padding: 20px 10px;
        box-sizing: border-box;
        background: white;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      "
    >
      <button
        @click="goIndex"
        class="btn"
        style="background: #1990ff; color: white; border-radius: 10px"
      >
        返回首页
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 个人信息区
      personal: {
        head: "https://cdn.uviewui.com/uview/album/1.jpg",
        iconPhone: require("@/static/index/personal_1.png"),
        iconEmail: require("@/static/index/personal_2.png"),
        iconWexin: require("@/static/index/personal_3.png"),
        iconAddress: require("@/static/index/personal_4.png"),
        phone: 13037354303,
      },
      personalData: [
        {
          id: 1,
          txt1: "手机：",
          txt2: "13037354303",
          icon: require("@/static/index/personal_1.png"),
        },
        {
          id: 2,
          txt1: "邮箱：",
          txt2: "dougao@test.com",
          icon: require("@/static/index/personal_2.png"),
        },
        {
          id: 3,
          txt1: "微信：",
          txt2: "",
          icon: require("@/static/index/personal_3.png"),
        },
        {
          id: 4,
          txt1: "地址：",
          txt2: "广东省-深圳市",
          icon: require("@/static/index/personal_4.png"),
        },
      ],
      //竖线图
      shuxian: require("@/static/index/shuxian.png"),
    };
  },
  methods: {
    //跳转
    goEdit() {
      uni.navigateTo({
        url: "/pages/personal/edit",
      });
    },
    goManagement() {
      uni.navigateTo({
        url: "/pages/personal/management",
      });
    },
    goAddWork() {
      uni.navigateTo({
        url: "/pages/personal/addWork",
      });
    },
    goIndex() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.personal {
  height: 100vh;
  background: #eff1fd;
  width: 100%;
  // 个人信息区域
  .personal_box {
    width: 100%;
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    background: white;
    margin: 10px 0px;
    // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    // box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0px 0px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.1);

    .personal_left {
      display: flex;
      align-items: center;
      .img {
        margin-right: 12px;
      }
      .text {
        display: flex;
        flex-direction: column;
        .personal_tag {
          // width: 65px;
          margin-top: 8px;
        }
      }
    }
  }
  //
  .cell1 {
    padding: 10px 0px;
    display: flex;
    border-bottom: 1px solid #e8e9ea;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .cell_ul {
    padding: 10px 10px;
    display: flex;
    flex-wrap: wrap;
    .cell_li {
      margin: 5px;
      font-size: 13px;
    }
  }
  .cell_ul2 {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
}
.personal /deep/.u-icon__img.data-v-6e20bb40 {
  height: auto;
  will-change: transform;
  width: 12px !important;
  height: 13px !important;
  font-size: 12px;
  margin-right: 4px;
}
.personal .personal_box /deep/.u-icon__icon.data-v-6e20bb40 {
  font-size: 12px !important;
}
</style>